<template>
	<view class="homepage-volist">
		<view class="none" v-if="list.length == 0">没有数据</view>
		<view class="volist-item">
			<view v-for="(item,index) in list" :key='index' class="item-avatar" @longpress="onLongpress(item.video_id,index)" @tap="detail(index)">
				<image v-if="item.img_url" :src="item.img_url" mode="aspectFit"></image>
				<view class="Violation" v-if="item.is_check == 3" @tap.stop="check(item.video_id)">违规</view>
				<view class="volist-bottom" :class="[item.is_like == 2 ? 'zan_active' : '']" @tap.stop="giveUp(item.video_id,item.is_like,index)">
					<i class="iconfont1 iconzan"></i>
					<text v-if="item.likenum < 10000">{{item.likenum}}</text>
					<text v-else>{{item.likenum / 10000}}w</text>
				</view>
			</view>
		</view>
		<uni-load-more v-if="list.length > 6" :status="status" :content-text="contentText" />
		<!-- 长按操作 -->
		<view class="bottom" v-if="isShow" @tap="closeButton">
			<view class="bottomView">
				<!-- <view class="check">置顶</view> -->
				<view class="delete" @tap.stop="deleteArt">删除</view>
				<view class="cancle">取消</view>
			</view>
		</view>
		<view class="bottom" v-if="isDelete" @tap="closeButton">
			<view class="deleteView">
				<view class="deleteTitle">删除之后无法恢复，您确定要删除作品？</view>
				<view class="buttons"><text class="btn_cancle">取消</text><text class="btn_yes" @tap="btnYes">确定</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				isShow: false,
				isDelete: false,
				video_id: '',
				index: 0
			}
		},
		props: {
			list: Array,
			status: String,
			contentText: Object
		},
		methods: {
			/* 点赞 & 取消点赞 */
			giveUp(video_id, is_like, index) {
				var state = 0;
				if (is_like == 2) {
					state = 1;
				} else {
					state = 2;
				}
				var data = {
					video_id: video_id,
					is_like: state
				}
				this.$zapi.apiPost('user/video.Lists/isLike', data).then(res => {
					if (res.data.code == 200) {
						var data = {};
						data.type = 0;
						data.index = index;
						data.is_like = is_like;
						this.$emit('islike', data);
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			/* 长按操作 */
			onLongpress(video_id,index) {
				this.isShow = true;
				this.video_id = video_id;
				this.index = index;
			},
			/* 关闭操作弹窗 */
			closeButton() {
				this.isShow = false;
				this.isDelete = false;
			},
			/* 打开删除文章蒙版 */
			deleteArt() {
				this.isDelete = !this.isDelete;
			},
			/* 确认删除 */
			btnYes() {
				this.$zapi.apiPost('user/video.Lists/delVideo',{video_id: this.video_id}).then(res=>{
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					if(res.data.code == 200) {
						this.list.splice(this.index,1);
						this.$emit('del',0)
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			detail(index) {
				this.$emit('videoDetail',index);
			},
			/* 查看违规详情 */
			check(article_id) {
				this.isShow = false;
				uni.navigateTo({
					url: '../complain/be-reported?article_id=' + article_id + '&type=2'
				})
			}
		}
	}
</script>

<style lang="scss">
	.none {
		color: #999999;
		text-align: center;
		margin-top: 200upx;
	}

	.homepage-volist {
		.volist-item {
			display: flex;
			padding: 20upx;
			flex-wrap: wrap;
			justify-content: flex-start;
			
			.item-avatar {
				position: relative;
				width: 213upx;
				height: 294upx;
				background-size: cover !important;
				margin: 5upx 1.5%;
			
				& image {
					width: 213upx;
					height: 294upx;
				}

				// 置顶
				.top {
					position: absolute;
					margin-left: 10upx;
					margin-top: 10upx;
					padding: 0 20upx;
					top: 0;
					font-size: 14px;
					color: #ffff;
					border-radius: 20upx 20upx 0px 20upx;
					background: #FFB800;
				}
				.Violation{
					width: 74upx;
					height: 40upx;
					background:rgba(242,82,82,1);
					opacity: 1;
					border-radius: 20upx 20upx 0px 20upx;
					position: absolute;
					top: 14upx;
					left: 14upx;
					color: #FFFFFF;
					text-align: center;
					line-height: 40upx;
				}
				// 点赞
				.volist-bottom {
					position: absolute;
					bottom: 0;
					color: #fff;
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: flex-end;
					background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.6));
					.iconzan {
						font-size: 50upx;
						line-height: 1;
					}
				}

				.zan_active {
					color: #FF4E78 !important;
				}

				.zan_active i {
					color: #FF4E78;
				}
			}
		}
	}

	/* 底部弹窗 */
	.bottom {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.4);
	}

	.bottomView {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #F6F6F6;
		border-radius: 42upx 42upx 0 0;
	}

	.bottomView view {
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		font-size: 30upx;
		color: #333333;
		background: #FFFFFF;
		border-top: 2upx solid #F6F6F6;
	}

	.bottomView view:first-child {
		border-radius: 40upx 40upx 0 0;
		border: none;
	}

	.cancle {
		margin-top: 20upx;
		border: none;
	}

	.deleteView {
		position: fixed;
		width: 422upx;
		height: 234upx;
		top: calc(50% - 200upx);
		left: calc(50% - 211upx);
		background-color: #FFFFFF;
		border-radius: 20upx;
	}

	.deleteTitle {
		color: #333333;
		font-size: 36upx;
		padding: 30upx;
		line-height: 1.4;
	}

	.buttons {
		display: flex;
		justify-content: space-between;
		padding: 0 30upx;
	}

	.btn_cancle {
		color: #999999;
		font-size: 36upx;
	}

	.btn_yes {
		color: #00D5A2;
		font-size: 36upx;
	}
</style>
